The input field and most recent statement overlap with the keyboard.

In chat apps where the input field and most recent statement are at the bottom of the screen, the iOS virtual keyboard was causing an inconvenience.

solution

The basic policy is window.scrollTo

Network response increases logging.

Content updates asynchronously and changes height at unpredictable times

React.useEffect is called after rendering the component, use this

const [logs, setLogs] = useState(...)

SetLogs in response to trigger redrawing

Now this pathway is resolved.

Text area changes size depending on the amount of text inside.

Scrolling with onChange didn't work.

Because the rendering is not yet finished at this time.

Check the height when changing content and setState if it needs to be updated.

The rendering of the component runs when this change is triggered.

I couldn't figure out how to do hooks after rendering child components.

There may be no guarantee that this will be after the rendering.

Contents of scrollToBottom

code:ts

const scrollToBottom = () => {

const e = document.getElementById("bottom") as HTMLElement;

const y = e.offsetTop - document.documentElement.clientHeight + 300;

if (y > 0) {

window.scrollTo(0, y);

}

};

300 is the height of the virtual keyboard. Could not figure out how to get it from the device.

According to the reference material (*1), it was 301, and the experiment with 11ProMax at hand seemed to be OK, so this is what we did.

BOTTOM has hr under the input field.

reference data

When retrieving with window.innerHeight, the value that can be obtained is different when the address bar is displayed by scrolling up and when the address bar is not displayed by scrolling down.

When retrieving with document.documentElement.clientHeight, there is no effect by the address bar and a constant value can always be obtained.

---